<template>
  <div class="diagram">
    <img :src="imgSrc"
         height="100%;">
    <img class="switch-btn" :src="switchBackBtnSrc" @click="switchBackBtnClick()"
         @mouseover="switchBackBtn('static/img/diagram/return_select.png')"
         @mouseout="switchBackBtn('static/img/diagram/return.png')">
  </div>
</template>

<script>
  export default{
    name: 'Diagram',
    data(){
      return {
        switchBackBtnSrc: 'static/img/diagram/return.png',
        baseSrc: 'http://newte.sh.1251225243.clb.myqcloud.com/TEGateway/123/Graphic/?bizcode=btjj24bc86ab21cd6b2c&adcode=150200&id=0472_103_001&format=png&width=1920&height=1080&customerid=tocc&version=1501&language=cn',
        imgSrc: '',
        interval: null
      }
    },
    methods: {
      switchBackBtn(src){
        this.switchBackBtnSrc = src;
      },
      switchBackBtnClick(){
        this.$emit('hide-diagram');
      }
    },
    mounted(){
      if (!this.interval) {
        this.imgSrc = this.baseSrc;
        this.interval = setInterval(()=> {
          this.imgSrc = this.baseSrc + "&" + Math.random();
        }, 1000 * 60 * 5);
      }
    },
    computed: {},
    destroyed () {
      clearInterval(this.interval);
    }
  }
</script>

<style scope>
  .diagram {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
  }

  .switch-btn {
    cursor: pointer;
    position: absolute;
    top: 20px;
    left: 20px;
  }
</style>
